const { createCanvas } = require('canvas');
const fs = require('fs');

// 创建画布
const width = 300;
const height = 400;
const canvas = createCanvas(width, height);
const ctx = canvas.getContext('2d');
ctx.fillStyle = "#000000";

ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "gray";
ctx.globalAlpha = 0.3;
ctx.fillRect(20, 20, width-40, height-90);
ctx.fillStyle = "gray";
ctx.globalAlpha = 0.3;
ctx.fillRect(0, 350, 300, 50);


// 文本样式设置
ctx.fillStyle = '#fff';
ctx.font = "18px sans-serif"; // 设置字体大小及字体样式

// 计算文本宽度
const text = '查看更多';
const metrics = ctx.measureText(text);
const textWidth = metrics.width;

// 计算文本的基线位置
const redAreaX = 0;
const redAreaY = 350;
const redAreaWidth = 300;
const redAreaHeight = 50;

// 水平居中
const x = redAreaX + (redAreaWidth - textWidth) / 2;

// 垂直居中
// measureText().actualBoundingBoxAscent 提供了文本高度的上升部分
const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
const y = redAreaY + (redAreaHeight + textHeight) / 2 - metrics.actualBoundingBoxDescent;

// 在红色区域中绘制文本
ctx.fillText(text, x, y);

// 需要绘制的文本数组
const texts = [
    '近代史书籍推荐',
    '在近代史的研究和阅读中，有几本书是广受推荐的经典之作，可以为您提供深入的历史理解和丰富的知识。以下是一些推荐书目：',
    '《中国近代史》 蒋廷黻：这本书被认为是快速了解中国近代史的佳作，语言和线索都非常清晰简练[1]。',
    '《晚清七十年》 唐德刚：作为中国史学界最著名的晚清史著作，这本书在海外有极大影响，以其独特的视角和魅力语言著称[1]。',
    '《中国近代史》 徐中约：虽然在国内有删减版，但仍然非常受欢迎，被多所美国大学用作中国近代史教材[1]。',
    '《近代中国社会的新陈代谢》 陈旭麓：适合近代史初学者，详细讲述了中国社会在百年间的变化[1]。',
    '《中华帝国晚期的叛乱及其敌人:1796-1864年的军事化与社会结构》 孔飞力：从城乡关系看近代革命的必要性和共产党为什么能成功[1]。',
    '《戊戌变法史事考》 茅海建：研究戊戌变法的重要著作[1]。',
    '《沉没的甲午》 陈悦：详细描述了甲午战争及其对中国历史的影响[1]。',
    '《义和团的起源及其运动》 佐藤公彦：深入探讨了义和团运动的起源及其背后的社会和历史因素[1]。',
    '《中国的奋斗》 徐中约：学界公认的中国近代史的经典著作和教科书，从清朝的建立起，一直写到21世纪初的中国[6]。',
    '《现代中国的形成》 李怀印：聚焦地缘政治、财政构造和政治认同三个关键因素，全面论述十七至二十世纪现代中国的形成过程[8]。',
    '这些建议基于最新的搜索结果，确保了时效性和相关性。阅读这些书籍将帮助您获得对中国近代史更为全面和深入的认识。'
];

// 实现换行功能
function drawText(ctx, text, x, y, maxWidth) {
    const words = text.split(' ');
    let line = '';

    words.forEach((word) => {
        const testLine = line + word + ' ';
        const metrics = ctx.measureText(testLine);
        const testWidth = metrics.width;

        if (testWidth > maxWidth) {
            if (line) {
                ctx.fillText(line, x, y);
                y += 24; // 行高
            }
            line = word + ' '; // 开始新行
        } else {
            line = testLine; // 添加到当前行
        }
    });

    if (line) {
        ctx.fillText(line, x, y); // 绘制最后一行
    }

    return y; // 返回当前y坐标，以便于继续绘制后续内容
}

// 清空画布并从顶部开始绘制
// ctx.clearRect(0, 0, width, height);
// let y = 20; // 初始 y 坐标

// // 绘制每行文本
// texts.forEach(line => {
//     y = drawText(ctx, line, 10, y, width - 20); // 留出一定的边距
// });

// 保存画布为图片
const buffer = canvas.toBuffer('image/png');
fs.writeFileSync('./markdown-output.png', buffer);

console.log('Canvas created and saved as markdown-output.png');
